<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabs" lineColor="#FF6000" :scrollable="false" @click="click"></u-tabs>
		</u-sticky>
		<view class="content" :style="couponList.length<5?'height:'+(viewHeight-70)+'px;':''">
			<view class="order_list" v-if="couponList.length">
				<coupon-item :data="item" v-for="(item,index) in couponList"></coupon-item>
			</view>
			<view v-else>
				<u-empty marginTop="60%" icon='https://file.shopro.top/imgs/empty/empty_goods.png' width="260"
					height="260" text="暂无优惠券~">
				</u-empty>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				//可视高度
				viewHeight: 0,
				//tab栏下标
				tabIndex: 0,
				//请求状态
				status: 'loadmore',
				page: 0,
				//tab数据
				tabs: [{
					name: '领券中心',
				}, {
					name: '已领取',
				}, {
					name: '已使用'
				}, {
					name: '已失效'
				}],
				couponList: [{
						id: 1,
						type: "0",
						title: "元旦节优惠券",
						price: "99.00",
						menkan: "199.00",
						startTime: "2023-12-16",
						endTime: "2024-01-17"
					},
					{
						id: 2,
						type: "0",
						title: "元旦节优惠券",
						price: "99.00",
						menkan: "199.00",
						startTime: "2023-12-16",
						endTime: "2024-01-17"
					},
					{
						id: 3,
						type: "0",
						title: "元旦节优惠券",
						price: "99.00",
						menkan: "199.00",
						startTime: "2023-12-16",
						endTime: "2024-01-17"
					},
					{
						id: 4,
						type: "0",
						title: "元旦节优惠券",
						price: "99.00",
						menkan: "199.00",
						startTime: "2023-12-16",
						endTime: "2024-01-17"
					}
				]
			}
		},
		onReady() {
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.viewHeight = res.windowHeight
				}
			})
		},
		onReachBottom() {
			console.log(this.page)
			if (this.page >= 3) return;
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.couponList = this.couponList.concat(this.couponList)
				if (this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		methods: {
			click(item) {
				this.tabIndex = item.index
				console.log("我要请求")
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #F6F6F6;
		padding: 30rpx 20rpx 30rpx;
	}
</style>